var content = document.querySelector('.content');
var container = document.querySelector('.container');
var backBtn = document.getElementById('backBtn');
var data = [];
var test = [];
var Stuname = [];
var Scores = [];
var StunameSort = [];
var ScoresSort = [];
var dic = [];
//dic = [{Stu_name: '张三', Score: 99},
// {Stu_name: '李四', Score: 77},
// {Stu_name: '王五', Score: 66},
// {Stu_name: '六六', Score: 88},
// {Stu_name: '孙琪', Score: 45},
// {Stu_name: '篱笆', Score: 33},
// {Stu_name: '周久', Score: 11},
// {Stu_name: '前十', Score: 77}];
//test = [2,1,1,1,1];
//for (var i = 0; i < dic.length; i++){
//    Stuname.push(dic[i].Stu_name);
//    Scores.push(dic[i].Score);
//}
// 将 Stuname 和 Scores 数组按分数的顺序进行排序

document.addEventListener("DOMContentLoaded", function() {

        $.ajax({
               url: '/management/teaservlet/teaGradeAnalysisCount',
               method: 'POST',
               success: function(response) {
                    test = response.data;
                    console.log(test);
                    var myEchart = echarts.init(document.querySelector('#main'));
                    var bar = echarts.init(document.querySelector('#bar'));
                    var option = {
                                title:{
                                    text:'成绩分布',
                                    x:'left'
                                },
                                tooltip:{
                                    trigger:'item',
                                    formatter: "{b} : {c} ({d}%)"
                                },
                                series:[
                                    {

                                        type:'pie',
                                        data : [
                                                {value:test[4],name:'90+'},
                                                {value:test[3],name:'80~89'},
                                                {value:test[2],name:'70~79'},
                                                {value:test[1],name:'60~69'},
                                                {value:test[0],name:'0~59'}
                                        ]
                                    }
                                ]
                            }
                    var barOption = {
                                     xAxis: {
                                        data: ['0~59', '60~69', '70~79', '80~90', '90+']
                                     },
                              yAxis: {
                                type: 'value',
                                axisLabel: {
                                  formatter: function (value) {
                                    if (value % 1 === 0) { // 判断是否是整数
                                      return value.toString(); // 返回整数值的字符串形式
                                    } else {
                                      return ''; // 隐藏小数部分
                                    }
                                  }
                                }
                              },
                                     tooltip:{
                                           trigger:'axis',
                                           formatter: "{b} : {c}"
                                     },
                                     series: [
                                       {
                                         type: 'bar',
                                         data: test
                                       }
                                     ]
                                   };
                    myEchart.setOption(option);
                    bar.setOption(barOption);
               },
               error: function(xhr, status, error) {
                 console.log(error);
               }
            });

        $.ajax({
          url: '/management/teaservlet/teaGradeAnalysis',
          method: 'POST',
          success: function(response) {
            dic = response.data;
            console.log(dic);

            for (var i = 0; i < dic.length; i++) {
              Stuname.push(dic[i].Stu_name);
              Scores.push(dic[i].Score);
            }

            var sortedData = dic.slice().sort(function(a, b) {
                  return a.Score - b.Score;
                });
                // 将排序后的数据存储在 StunameSort 和 ScoresSort 数组中
                for (var i = 0; i < sortedData.length; i++) {
                  StunameSort.push(sortedData[i].Stu_name);
                  ScoresSort.push(sortedData[i].Score);
                }

                var sum = Scores.reduce(function(total, score) {
                  return total + parseFloat(score);
                }, 0);

            var ave = sum / Scores.length;
            console.log(ave);
            var max = Math.max.apply(null, Scores);
            console.log(max);
            var min = Math.min.apply(null, Scores);
            console.log(min);

            var line = echarts.init(document.querySelector('#line'));
            var sca = echarts.init(document.querySelector('#sca'));
            var lineOption = {
              xAxis: {
                type: 'category',
                data: Stuname,
                axisLabel: {
                    fontSize: 11 // 调整字体大小
                  },
              },
              yAxis: {
                type: 'value'
              },
              tooltip: {
                trigger: 'axis',
                formatter: "{b} : {c}"
              },
              series: [
                {
                  data: Scores,
                  type: 'line',
                  markLine: {
                    symbol: 'none',
                    data: [
                      { yAxis: ave, label: { show: false } }, // 平均成绩的标线
                      { yAxis: max, label: { show: false } }, // 最高成绩的标线
                      { yAxis: min, label: { show: false } } // 最低成绩的标线
                    ]
                  }
                }
              ]

            };
            var scaOption = {
              xAxis: {
                data: StunameSort,
                axisLabel: {
                                    fontSize: 11 // 调整字体大小
                                  },
              },
              yAxis: {
                type: 'value'
              },
              tooltip: {
                trigger: 'axis',
                formatter: "{b} : {c}"
              },
              series: [
                {
                  data: ScoresSort,
                  type: 'scatter',
                  markLine: {
                    symbol: 'none',
                    data: [
                      { yAxis: ave, label: { show: false } }, // 平均成绩的标线
                      { yAxis: max, label: { show: false } }, // 最高成绩的标线
                      { yAxis: min, label: { show: false } } // 最低成绩的标线
                    ]
                  }
                }
              ]
            };
            line.setOption(lineOption);
            sca.setOption(scaOption);
            // 鼠标移动事件...
            sca.on('mousemove', function(params) {
              var dataIndex = params.dataIndex;
              var markLineData = scaOption.series[0].markLine.data;

              // 鼠标在对应位置时，将标线的 `label` 属性的 `show` 设置为 true
              for (var i = 0; i < markLineData.length; i++) {
                markLineData[i].label.show = i === dataIndex;
              }

              // 更新标线的配置
              sca.setOption({
                series: [
                  {
                    markLine: {
                      data: markLineData
                    }
                  }
                ]
              });
            });
            sca.on('mouseout', function() {
              var markLineData = scaOption.series[0].markLine.data;

              // 鼠标离开时，将标线的 `label` 属性的 `show` 设置为 false
              for (var i = 0; i < markLineData.length; i++) {
                markLineData[i].label.show = false;
              }

              // 更新标线的配置
              sca.setOption({
                series: [
                  {
                    markLine: {
                      data: markLineData
                    }
                  }
                ]
              });
            });
            line.on('mousemove', function(params) {
              var dataIndex = params.dataIndex;
              var markLineData = lineOption.series[0].markLine.data;

              // 鼠标在对应位置时，将标线的 `label` 属性的 `show` 设置为 true
              for (var i = 0; i < markLineData.length; i++) {
                markLineData[i].label.show = i === dataIndex;
              }

              // 更新 Echarts 实例的配置
              line.setOption(lineOption);
            });
            line.on('mouseout', function() {
              var markLineData = lineOption.series[0].markLine.data;

              // 鼠标离开时，将标线的 `label` 属性的 `show` 设置为 false
              for (var i = 0; i < markLineData.length; i++) {
                markLineData[i].label.show = false;
              }

              // 更新 Echarts 实例的配置
              line.setOption(lineOption);
            });

          },
          error: function(xhr, status, error) {
            console.log(error);
          }
        });


    var links = document.querySelectorAll('.sidebar ul li a');

      for (var i = 0; i < links.length; i++) {
        links[i].addEventListener('mouseenter', function() {
          this.style.transition = '0.2s';
          this.style.backgroundColor = '#679';
          this.style.borderRadius = '10px'; // 设置边缘的圆角半径为10px
        });

        links[i].addEventListener('mouseleave', function() {
          this.style.transition = '0.2s';
          this.style.backgroundColor = '';
          this.style.borderRadius = '10px'; // 鼠标移出时恢复原始边缘
        });
      }
});

content.addEventListener('mouseenter', function() {
     content.style.transition = 'background-color 0.3s';
     content.style.backgroundColor = 'rgba(100,100,100,0.5)'; // 将透明度更改为 0.5，使背景色加深
   });

content.addEventListener('mouseleave', function() {
     content.style.transition = 'background-color 0.3s';
     content.style.backgroundColor = 'rgba(100,100,100,0.2)'; // 将透明度恢复为 0.2，使背景色变浅
   });
